<!-- index page FlipTrack - Lasse Bianco-->
<!DOCTYPE html>
<html>
        <head>
        <title>FlipTrack Main Index</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        
        <!--  flickering screen solution when using transitions-css-->
		<link rel="stylesheet" href="customSolutions/flickering.css" />
		
        <link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
          	 
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		
		

		<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
		<!-- javascripts to access native functions! -->
		<script type="text/javascript" src="cordova-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8" src="customSolutions/myMedia.js"></script>
		<!--  <script type="text/javascript" charset="utf-8" src="customSolutions/fastclick.js"></script>-->
		<!-- navigationbar control -->
		<script type="text/javascript" charset="utf-8" src="customSolutions/navBar.js"></script>
		<!-- flickering screen solution when using transitions-javascript-->
		<script type="text/javascript" charset="utf-8" src="customSolutions/flickering.js"></script>
		
		
</head>

<body>
	 
	<!-- jqm pages container everything wrapped inside this to smooth transitions out-->
	<div id="container">
	<div data-role="page" id="home">
        <header data-role="header" data-position="fixed" class="headerNav">
			<!-- navigation bar -->
            <div data-role="navbar" data-theme="a">
        		<ul>
            		<li><a id="nav-manual">Manual Styring</a></li>
            		<li><a id="nav-flip">Flip Styring</a></li>
        		</ul>
        	</div> <!-- end of navigation bar -->
        </header>
        
        
        	
        <div class="homeheading" >
        	<h1 style="text-align:center;">FlipTrack</h1>
        	<p style="text-align:center;"><em>~Vælg din styring i toppen~</em></p> 
        </div>
        
        <!-- PlayerContent MANUEL -->
    	<div data-role="content" id="content-manual">
        	<h1 style="text-align:center;">Manuel Styring</h1>
   		<p>
	   		<select id="playlist" onchange="updateMedia()" data-theme="a">
	   			<option>Vælg et nummer</option>
	        	<option value="/android_asset/www/music/Marcus.mp3">FlipTrack</option>
	        	<option value="test.mp3">SD Kort</option>
	        	<option value="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3">Internet - Demo nummer</option>
	        	<option value ="/android_asset/www/music/Black.mp3">Predators-2010</option>
	   		</select>
   		</p>
   
   			<!-- counter -->
   			<div class="ui-grid-a">
            		<div class="ui-block-a" style="text-align:left;">Tid: <span id="audio_position">0 sek</span></div>
            		<div class="ui-block-b" style="text-align:right;">Total: <span id=media_dur>0</span> sek</div>
        	</div> <!-- /grid-a -->
   
   			<a href="#" onclick="playAudio()"><img id="play" src="images/play.png"></a>
   			<a href="#" onclick="stopAudio()"><img id="stop" src="images/stop.png"></a>
   		</div>
   		<!-- /counter -->
   		<!-- END PlayerContent MANUEL -->
        
        <!-- PlayerContent FLIP -->
        <div data-role="content" id="content-flip">
        	<h1 style="text-align:center;">Flip Styring</h1>
   		
   			<p style="text-align:center;">Vælg <strong>TIL</strong> for at starte FlipTrack styring.</p>
        
        <p style="text-align:center;">Flip telefonen med skærmen ned for at starte musikken, Flip op for at pause musikken.</p>
			
        	<div data-role="fieldcontain" data-theme="e">
            <p style="text-align:center;" id="labelControl"><strong>Start/Stop Flip Styring</strong></p> 
            <select name="pauseslider" id="pauseslider" data-role="slider" data-theme="a">
                <option value="off" data-theme="a">FRA</option>
                <option value="on" data-theme="a">TIL</option>
            </select></div>	 
		</div> 
   		<!-- END PlayerContent FLIP -->
        
        
        
		
				
			
	
    	
        
      
<div data-role="footer" class="footermain" data-id="myfootermain" data-position="fixed">
<a href="about.html" data-icon="info" data-transition="slideup" class="ui-btn-right">About</a>
                <h1>Biancoolware ®</h1>       
        </div>
</div>
 </div> <!-- end of jqm pages container -->       

</body>
</html>